<template>
  <!--表格加分页组件-->
  <div class="dark-table">
    <div class="top-btn">
      <slot></slot>
    </div>
    <!--@on-current-change="onlySelectedRow"不起作用，新加一条@on-row-click="onlySelectedRow"作为单击事件   谢欢改-->
    <Table
      :ref="tableRef"
      class="dark-table-elem"
      :height="tableHeight"
      :width="tableWidth"
      :columns="tableColumns"
      :data="tableData"
      :show-header="showHeader"
      tooltip-theme="light"
      :loading="isloading"
      stripe
      border
      :show-summary='summary'
      :summary-method='summaryMethod'
      :highlight-row="highlightRow"
      :row-class-name="setRowClassName"
      @on-current-change="onlySelectedRow"
      @on-row-click="onlySelectedRow"
      @on-row-dblclick="doubleSelectRow"
      @on-selection-change="selectChange"
    ></Table>

    <div class="dark-table-bottom" v-show="paginateTotal!==null" :ref="bottomRef">
      <span v-if="showPageLeft" style="padding-left: 20px">
      <!--如果没数据，也应该是第1页-->
        共{{ paginateTotal || 0 }}条记录 第{{ value.pageNum || 1 }}/{{Math.ceil(paginateTotal / value.pageSize) || 1
        }}页&nbsp;&nbsp;{{ !isHideExport ? "另存为" : "" }}
        &nbsp;
        <!-- <img
          :src="require('@/assets/img/pdf-icon.png')"
          width="25"
          @click="exportFile(1)"
          v-if="!isHideExport"
          alt
          class="cursor-style f-mr10"
          style="cursor: not-allowed;"
        /> -->

        <img :src="require('@/assets/img/excel-icon.png')" width="25" @click="exportFile(3)" alt v-if="!isHideExport" class="cursor-style"/>
      </span>
      <!-- 修改了page-size的值 从10 改为 value.pageSize 加上了 isHideExport 隐藏导出图片默认显示 true为隐藏-->
      <Page
        :total="paginateTotal"
        :current="value.pageNum"
        @on-change="paginateChange"
        @on-page-size-change="onePageSum"
        :page-size="value.pageSize"
        :page-size-opts="[20, 50, 100]"
        :show-elevator="showElevator"
        :show-sizer="showSizer"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "darkTable",
  components: {},
  data() {
    return {
      tableRef: "table" + new Date().getTime(),
      bottomRef: "bottom" + new Date().getTime(),
    };
  },
  props: {
    value: {
      type: Object,
      default(){
        return {
          pageNum: 1,
          pageSize: 20
        }
      }
    },
    summary:{
      type: Boolean,
      default: false // 是否显示合计
    },
    summaryMethod:{
      type: Function,
      default: null
    },
    tableColumns: {
      // 表头数据
      type: Array,
      default: ()=>[]
    },
    tableData: {
      // 表格内部数据
      type: Array,
      default: ()=>[]
    },
    // 所有页面总数据条数,判断是否显示分页
    paginateTotal: {
      type: Number,
      default: null
    },
    highlightRow: {
      //单选高亮
      type: Boolean,
      default: false
    },
    tableWidth: {
      type: String,
      default: "100%"
    },
    //表格高度 'auto'自适应
    tableHeight: {
      type: Number | String,
      default: 600
      // default: 'calc(100vh-426px)'
    },
    //是否隐藏导出
    isHideExport: {
      type: Boolean,
      default: false
    },
    isloading: {
      // 是否使用loading
      type: Boolean,
      default: true
    },
    doubleClickSelectRow: {
      // 是否使用loading
      type: Boolean,
      default: false
    },
    // 是否显示表头
    showHeader: {
      type: Boolean,
      default: true
    },
    // 是否显示分页的左侧部分
    showPageLeft: {
      type: Boolean,
      default: true
    },
    // show-sizer
    showSizer: {
      type: Boolean,
      default: true
    },
    // show-elevator
    showElevator: {
      type: Boolean,
      default: true
    }
  },
  computed: {
  },
  watch: {},
  methods: {
    paginateChange(arg) {
      // 参数表示--改变后显示的页数
      this.value.pageNum = arg;
      this.$emit("input", this.value);
      //this.$emit("on-change", this.value);
    },
    onePageSum(arg) {
      // 参数表示--每页显示数据条数
      this.value.pageSize = arg;
      this.$emit("input", this.value);
    },
    exportFile(arg) {
      // 导出--  1.导出pdf    2.导出word
      this.$emit("exportFile", arg);
    },
    //单选-选中事件
    onlySelectedRow(arg,index) {
      this.$emit("onlySelectedRow", arg,index);
    },
    //双击-选中事件
    doubleSelectRow(arg,index) {
      // 需要在tabledata里面设置index和_isChecked
      if (this.doubleClickSelectRow && !arg._disabled) {
        this.$refs.table.toggleSelect(arg.index);
      }
      this.$emit("doubleSelectRow", arg,index);
    },
    selectChange(arg) {
      this.$emit("selectChange", arg);
    },
    rowClick(data, index) {
      //data 该行数据 ，index该行索引
      this.$refs.table.toggleSelect(index); // 选中/取消该行（若已选中则是取消，若已取消则是选中）
    },
    caclDistance() {
      const darkBottom = this.$refs[this.bottomRef]
      const darkTable = this.$refs[this.tableRef]
      console.log(this.$refs)
      const bottomDistance = darkBottom.getBoundingClientRect()
      const tableDistance = darkTable.$el.getBoundingClientRect()
      console.log(tableDistance,"1111",bottomDistance)
      if(bottomDistance.top - (tableDistance.height + tableDistance.top)<=5) {
        darkBottom.style.position = 'static'
      }else{
        darkBottom.style.position = 'absolute'
      }

      console.log(bottomDistance.top - (tableDistance.height + tableDistance.top))
      // debugger
    },
    /**
     * 个性化rowClass配置
     * 通过routeName匹配
     */
    setRowClassName(row, index) {
    if (['urgentRepairOrder','urgentRepairOrders','examineRepairOrder',
      'maintenanceOrders','consultServiceOrder','complaintWorkOrder','otherServiceOrders',
      'provisionOtherServiceOrders','consultServiceOrderMag'].includes(this.$route.name)) {
        if (!row.reminderTime) {
          return  'isNone'
        }else if (row.workStatus === '02' && (new Date(row.reminderTime) <= new Date())) {
          return 'isYellow'
        } else if (row.workStatus === '03' && (new Date(row.endTime) <= new Date())) {
          return 'isRed'
        }
      }else if(this.$route.name==='complaintsRecord'){
        if(!!row.relaWorkNo) {
          return 'isOrange'
        }
      }
    }
  },
  created() {},
  mounted() {
    // this.caclDistance()
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
.dark-table {
  /*background-color: #fff;不要加！！！不然样式有问题*/
  padding: 15px 15px 0 15px;
  .top-btn {
    /deep/.ivu-btn {
      margin-bottom:10px;
      height:28px;
      > span {
        line-height:1;
      }
    }
  }
  /deep/.ivu-table-tip {
    overflow-x: hidden
  }
  /deep/.ivu-table-cell {
    span {
      font-size: 14px;
    }
  }
  div.dark-table-elem {
    width: 100%;
    margin-bottom: 10px;
    /deep/.dark-table-setBtn {
      color: #0893fd;
      display: inline-block;
      margin: 0 10px;
      cursor: pointer;
    }
    /deep/.ivu-table-header > table {
      width: 100%;
    }
    /deep/.ivu-table-body {
      font-size: 10px;
      width: 100%;
      td {
        height: 36px;
      }
    }
    /deep/.ivu-table-fixed-right {
      font-size: 10px;
      width: 100%;
      height: 100%;
      td {
        height: 36px;
      }
    }
  }
  .dark-table-bottom {
    width: 100%;
    font-size: 10px;
    padding:20px 20px 20px 0;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    z-index:99;
    > span{
      line-height:32px;
    }
    img {
      vertical-align: middle;
    }

    /deep/.ivu-page-item {
      // background-color: transparent;
      // border: 1px solid #0893fd;
      a {
        font-size: 10px;
        // color: #add8ff;
      }
    }
    /deep/.ivu-page-item-active {
      // color: #fff;
      // background-color: #0893fd;
      font-size: 10px;
    }
    /deep/.ivu-page-next,
    /deep/.ivu-page-prev {
      // background-color: transparent;
      // border: 1px solid #0893fd;
      a {
        // color: #add8ff;
      }
    }

    /deep/.ivu-select-selection,
    /deep/.ivu-input {
      // border-color: #0893fd;
      // background-color: transparent;
      // color: #add8ff;
    }
    /deep/.ivu-page-options-elevator input {
      // background-color: transparent;
      font-size: 10px;
      // color: #add8ff;

      // border-color: #0893fd;
      text-align: center;
    }
  }
  /deep/.ivu-table-row-highlight {
    td {
      // background-color: #3d84c1!important;
    }
  }
  .ivu-page-options {
    vertical-align: baseline
  }
  .cursor-style {
    cursor: pointer;
  }
  /deep/ .ivu-table-tip table tr td {
    text-align: center;
    background-image: url("~@/assets/img/zwsj.png");
    background-position: center 60px;
    background-repeat: no-repeat;
    color: #999;
    // height: 369px;
    background-size: 190px;
    span {
      display: none;
    }
  }
}
  /deep/ .ivu-page-options{vertical-align: bottom;}
</style>
<style>
  .ivu-table-row.isRed td {
    background-color:  #ff9998 !important;
  }
  .ivu-table-row.isYellow td {
    background-color:  #ffdf85 !important;
  }
  .ivu-table-row.isOrange td {
    background-color: #90d66d !important;
  }
</style>
